<template>
	<view>
		<view class="tab">
			<view class="item" v-for="(item, i) in topSymbols" :key="item.symbol">
				<view class="t">
					<text class="title">{{ item.title}}</text>
					<text class='per' :class="topMakretMap[`market.${item.symbol}.detail`].change | formatChangeCls">
						{{topMakretMap[`market.${item.symbol}.detail`].change | formatChange}}
					</text>
				</view>
				<view class="c" :class="topMakretMap[`market.${item.symbol}.detail`].change | formatChangeCls">
					{{topMakretMap[`market.${item.symbol}.detail`].tick ? topMakretMap[`market.${item.symbol}.detail`].tick.close : "0.00"}}
				</view>
				<view class="b">≈ {{ topMakretMap[`market.${item.symbol}.detail`].cny }} CNY</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "coinTab",
		data() {
			return {
				topSymbols: [{
						symbol: "btcusdt",
						title: "BTC/USDT"
					},
					{
						symbol: "ethusdt",
						title: "ETH/USDT"
					},
					{
						symbol: "eosusdt",
						title: "EOS/USDT"
					},
				],
				topMakretMap: {
					"market.btcusdt.detail": {},
					"market.ethusdt.detail": {},
					"market.eosusdt.detail": {},
				},
			};
		},
		onShow() {
			// console.log('onshow')
		},
		onHide() {
			// console.log('onhide')

		},
		mounted() {
			// console.log('mounted quant')
			// this.$store.dispatch('WEBSOCKET_INIT','ws://api.hadax.com/ws')
			setTimeout(() => {
				this.loadTopMarket();
			}, 500);
		},
		beforeDestroy() {
			// console.log('beforeDestroy')

			for (let i = 0; i < 3; i++) {
				let ch = `market.${this.topSymbols[i].symbol}.detail`;
				let data = {
					unsub: ch,
					id: Date.now() + "",
				};
				this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data));
				uni.$off(ch, (res) => {});
			}
			/* setTimeout(() => {
			  this.$store.dispatch('WEBSOCKET_CLOSE')
			}, 500); */

		},
		filters: {
			formatChange(v) {
				return (v > 0 ? "+" : "") + parseFloat(v).toFixed(2) + "%";
			},
			formatChangeCls(v) {
				if (v == 0) {
					return "";
				} else if (v > 0) {
					return "upper-text";
				} else {
					return "lower-text";
				}
			},
			formatMarketcap(v) {
				return formatUnit(v);
			},
		},
		methods: {
			loadTopMarket() {
				// console.log("loadTopMarket");
				let $this = this;
				for (let i = 0; i < 3; i++) {
					let ch = `market.${this.topSymbols[i].symbol}.detail`;
					// console.log("ch", ch);
					let data = {
						sub: ch,
						id: Date.now() + "",
					};
					this.$store.dispatch("WEBSOCKET_SEND", JSON.stringify(data));
					uni.$on(ch, (res) => {
						let d = res.data;
						if (d) {
							// console.log('res', res, d.tick)
							//d.tick.close = d.tick.close.toFixed(2);
							d.change = parseFloat(
								((d.tick.close - d.tick.open) / d.tick.open) * 100
							).toFixed(2);
							d.cny = parseFloat(d.tick.close * 7.04).toFixed(2);
							$this.topMakretMap[res.data.ch] = d;
						}
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.tab {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
		.item {
			background: #FFFFFF;
			border-radius: 12rpx;

			width: 220rpx;
			height: 164rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 5rpx;
			.t {
				margin-top: 15rpx;
				.title {
					width: 124rpx;
					height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.per {
					width: 74rpx;
					height: 18rpx;
					font-size: 24rpx;
					font-family: DIN;
					font-weight: 500;
				}
			}
			.c {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: -10rpx;
				width: 200rpx;
				font-size: 44rpx;
				font-family: DIN;
				font-weight: bold;
			}
			.b {
				height: 19rpx;
				font-size: $font-sm;
				font-family: DIN;
				font-weight: 500;
				color: #666666;
				line-height: 7rpx;
			}

		}
	}

	.upper-text {

		color: $uni-color-upper
	}

	.lower-text {
		color: $uni-color-lower
	}
</style>
